<template>
  <view class="viewport">
    <view class="tabs">
      <view
        v-for="tab in orderTabs"
        :key="tab.orderState"
        class="tab"
        :style="{ borderBottom: activeTab === tab.orderState ? '2px solid #27ba9b' : 'none' }"
        @tap="onTap(tab.orderState)"
      >
        <text class="title">{{ tab.title }}</text>
      </view>
    </view>
    <scroll-view
      scroll-y
      class="content"
      @scrolltolower="onScrollToLower"
      enable-flex
      lower-threshold="10"
      refresher-enabled
      @refresherrefresh="onRefresherrefresh"
      :refresher-triggered="isTriggered"
    >
      <view class="inner" :style="{ paddingBottom: safeAreaInsets?.bottom + 'rpx' }">
        <navigator
          class="order"
          v-for="(order, index) in orders?.items"
          :key="index"
          :url="`/pagesOrder/orderDetail/orderDetail?id=${order.id}`"
        >
          <view class="top">
            <view class="time">{{ order.createTime }}</view>
            <view class="state">{{ orderStateList[order.orderState].text }}</view>
          </view>
          <view class="item" v-for="(item, v) in order.skus" :key="v">
            <view class="image">
              <image class="pic" :src="item.image" mode="aspectFill"></image>
            </view>
            <view class="meta">
              <view class="meta">
                <view class="name">{{ item.name }}</view>
                <text class="attrs">{{ item.attrsText }}</text>
              </view>
            </view>
            <view class="count">x{{ item.quantity }}</view>
          </view>
          <view class="action">
            <button class="btn pay-btn" v-if="order.orderState === orderStateEnum.DaiFuKuan">
              去支付
            </button>
            <button
              class="btn re-btn"
              v-if="
                [
                  orderStateEnum.DaiFaHuo,
                  orderStateEnum.DaiShouHuo,
                  orderStateEnum.DaiPingJia,
                ].includes(order.orderState)
              "
            >
              再次购买
            </button>
            <button
              class="btn confirm-btn"
              style="margin-left: 20rpx"
              v-if="order.orderState === orderStateEnum.DaiShouHuo"
            >
              确认收货
            </button>
          </view>
        </navigator>
        <view class="info">
          <view class="loading" v-if="!ifFinish">
            <uni-icons type="spinner-cycle" size="14"></uni-icons>
            <text class="icon-loading">正在加载中...</text>
          </view>
          <view class="no-loading" v-else>暂无数据</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Api from '@/services/index'
import { onLoad } from '@dcloudio/uni-app'
import type { TPageResult } from '@/types/global'
import type { IOrderListItem } from '@/types/order'
import { orderStateEnum, orderStateList } from '@/enums/constant'
const { safeAreaInsets } = uni.getSystemInfoSync()
const orderTabs = ref([
  { orderState: 0, title: '全部' },
  { orderState: 1, title: '待付款' },
  { orderState: 2, title: '待发货' },
  { orderState: 3, title: '待收货' },
  { orderState: 4, title: '待评价' },
])

const activeTab = ref(0)
const orders = ref<TPageResult<IOrderListItem>>()
const ifFinish = ref(false)
const isTriggered = ref(false)

const onTap = (orderState: number) => {
  activeTab.value = orderState
  orders.value = undefined
  getList()
}

const getList = async () => {
  const res = await Api.OrderAPI.getOrderList({
    orderState: activeTab.value,
    page: orders.value?.page ?? 1,
    pageSize: 8,
  })
  const oldArr = orders.value?.items
  if (oldArr) {
    orders.value!.items = oldArr.concat(res.result.items)
  } else {
    orders.value = res.result
  }
  if (orders.value!.page < orders.value!.pages) {
    ifFinish.value = false
    orders.value!.pages++
  } else {
    ifFinish.value = true
  }
}

onLoad(async (options) => {
  activeTab.value = Number(options?.type ?? 0)
  getList()
})

const onScrollToLower = () => {
  if (ifFinish.value) return
  else {
    getList()
  }
}

const onRefresherrefresh = async () => {
  isTriggered.value = true
  setTimeout(() => {
    isTriggered.value = false
    getList()
  }, 1000)
}
</script>

<style lang="scss" scoped>
.viewport {
  height: 100vh;
  background-color: #f4f4f4;

  .tabs {
    position: relative;
    display: flex;
    width: 100%;
    height: 80rpx;
    .tab {
      width: 20%;
      margin: 0 10rpx;
      font-size: 28rpx;
      line-height: 80rpx;
      text-align: center;
    }
  }

  .content {
    padding: 20rpx 0;
    background: #f4f4f4;
    .order {
      margin: 0 20rpx;
      padding: 0 20rpx 20rpx;
      margin-bottom: 20rpx;
      background: #fff;
      border-radius: 20rpx;

      .top {
        display: flex;
        justify-content: space-between;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 26rpx;
        color: #7a7a7a;
      }
      .item {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        margin-bottom: 20rpx;
        .image {
          .pic {
            height: 150rpx;
            width: 150rpx;
            border-radius: 10rpx;
          }
        }
        .meta {
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: space-around;
          padding: 0 10rpx;
          height: 150rpx;
          .name {
            width: 100%;
            line-height: 1;
            font-size: 28rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .attrs {
            display: inline;
            padding: 5rpx 10rpx;
            font-size: 24rpx;
            color: #888;
            background-color: #f7f7f8;
            border-radius: 5rpx;
          }
        }
        .count {
        }
      }
      .action {
        display: flex;
        justify-content: flex-end;
        .btn {
          width: 180rpx;
          height: 60rpx;
          margin: 0;
          padding: 0;
          line-height: 60rpx;
          font-size: 26rpx;
          text-align: center;
          border-radius: 50rpx;
          border: 1px solid #eee;
          background-color: transparent;

          &.pay-btn,
          &.confirm-btn {
            background: #27ba9b;
            color: #fff;
            border: none;
          }
          &.re-btn {
            color: #27ba9b;
            border: 1px solid #27ba9b;
          }
        }
      }
    }

    .info {
      font-size: 24rpx;
      text-align: center;
      margin: 20rpx 0;
    }
  }
}
</style>
